<template>

    <!--行提供 gutter 属性来指定列之间的间距，其默认值为0。  row 是行   col 是 列 ,span 是大小 ,offset 偏置 -->
    <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ path: '/overview' }">
            <h3>首页</h3>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
            <h3>Spider</h3>
        </el-breadcrumb-item>
    </el-breadcrumb>


    <el-card class="box-card">

        <el-row :gutter="0">
            <el-col :span="4">
                <div class="grid-content" style="text-align: center; vertical-align:middle ; margin: 13px">
                    <el-button size="large" @click="runfun">启动</el-button>
                </div>
            </el-col>
            <el-col :span="10">
                <div class="grid-content bg-purple" style="margin: 13px">
                    <el-input id="cmd_id" size="large" v-model="input" placeholder=""></el-input>
                </div>

            </el-col>


        </el-row>

        <el-divider />

        <el-row>

            <el-col :span="16" :offset="2">
                <el-table  stripe style="width: 100%">
                    <el-table-column prop="com" label="Command命令" />
                    <el-table-column prop="name" label="解释" width="380" />

                    <el-table-column label="Operations">
                        <template #default="scope">
                            <el-button size="small" @click="handleEdit(scope.$index, scope.row)">Edit
                            </el-button>
                            <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>

        </el-row>

    </el-card>

</template>


<script setup>

import { ref, reactive } from 'vue'

import { mysubprocess } from '../../../api/workers'
import { ArrowRight } from '@element-plus/icons-vue'     //图标

const input = ref("");

function runfun() {
    console.log('console input :', input.value);
    var inputjson = {
        inputstr: input.value
    };
    console.log("inputjson:", inputjson);

    mysubprocess(inputjson).then(response => {
        console.log(response['data']["code"]);
        console.log(response['data']["msg"]);

    })

}


</script>

<style lang="less" scoped>
  .box-card {
      height: 100%;
  }

  .el-row {
      margin-bottom: 20px;
  }

  .el-col {
      border-radius: 4px;
  }

  .row-bg {
      padding: 10px 0;
      background-color: #f9fafc;
  }
</style>